<template>
  <div class="box">
    {{ a + b }}
  </div>
  <Row>
    <Button type="default" @click="add">操作</Button>
  </Row>
  <Table :columns="column" :data="data" @on-expand="onExpand">
    <template #action="{ index }">
      <Button type="default" size="small" @click="open(index)">操作</Button>
    </template>
  </Table>
  <testBox ref="c-testBox">
    <template #content="{ main }">
      <Row :gutter="10">
        <Col v-for="(item, index) in main.list" style="margin-bottom: 10px">
          <Button type="default">操作{{ item }}</Button>
        </Col>
      </Row>
    </template>
    <template #footer>这里是底部</template>
  </testBox>
  <Button
    type="default"
    @click="
      showMe({
        a: 1,
        b: 2,
        c: 3,
        d: { a: 1, b: 2 }
      })
    "
  >
    操作
  </Button>
</template>
<script>
import testBox from './251025_1.vue'
export default {
  components: {
    testBox
  },
  data() {
    return {
      column: [
        {
          type: 'expand',
          width: 40,
          render(h, row) {
            return h('div', row.name)
          }
        },
        {
          key: 'name',
          title: 'name'
        },
        {
          key: 'age',
          title: 'age'
        },
        {
          key: 'action',
          title: 'action',
          slot: 'action'
        }
      ],
      data: [
        {
          name: '姓名1',
          age: '年龄1',
          _expanded: false
        },
        {
          name: '姓名2',
          age: '年龄2',
          _expanded: false
        }
      ],
      a: 1,
      b: 2
    }
  },
  methods: {
    open(index) {
      let { _expanded } = this.data[index]
      //row._expanded = true;
      this.data[index]._expanded = !_expanded
      //这一个操作的回调
      this.$refs['c-testBox'].show({
        list: [1, 2, 3, 4, 5],
        onOk(res) {
          console.log(res)
        },
        onCancel(err) {
          console.log(err)
        }
      })
    },
    add() {
      console.log(`helloworld`)
      this.a++
    },
    onExpand() {
      console.log(e)
      console.log(this.data[0])
    },
    showMe({ d: { a: nameA } }) {
      console.log(nameA)
    }
  },
  mounted() {
    Promise.reject(9999).then(
      (res) => {},
      (err) => {
        console.log(`reject`, err)
      }
    )
    const obj = {
      a: 1,
      b: 2,
      c: 3
    }
    // const { a, b, ...newObj } = { ...obj, userName: obj.a, age: obj.b }
    const { a, ...twoObj } = { ...obj }
    console.log(`twoObj`, twoObj)
    const { a: objA, c: objB } = obj
    console.log('objA:' + objA, 'objB:' + objB)
    // console.log(newObj);

    const data = {
      user: {
        id: 101,
        profile: {
          firstName: 'John',
          lastName: 'Doe'
        },
        o1: {
          a: 1,
          b: 2
        },
        o2: {
          a: 1,
          b: 99
        }
      }
    }
    // const {
    // 	user: {
    // 		id: newId,
    // 		profile: {
    // 			firstName: f1,
    // 			lastName: f2
    // 		}
    // 	}
    // } = data;

    const {
      user: { id: newId, profile: newProfile, ...otherProperties }
    } = data

    console.log(`id`, newId, newProfile, otherProperties)
    const newObj = { newId, newProfile, otherProperties }
    this.newObj = newObj

    //console.log(newId, f1, f2);

    const { n1: newN1, n2: newN2 } = {
      n1: 111,
      n2: 222
    }
    console.log(newN1, newN2)

    let o1 = {
      a: 1,
      b: 2,
      c: 3
    }

    let o2 = {
      ...o1,
      ...{
        newA: o1.a,
        newB: o1.b,
        newC: o1.c
      }
    }
    let { c, ...o3 } = o2
    console.log(o3)
    const a3 = {
      title: `标题`,
      desc: '描述',
      img: '图片'
    }
    const { title: share_title, desc: share_desc, img: img_url } = a3

    const objA3 = {
      ...a3,
      share_title: a3.title,
      share_desc: a3.desc,
      share_img: a3.img
    }

    const arr2 = [1, 3, 4, { a: 1, b: 2 }]
    const [, , , { a: newA, b: newB }] = arr2

    const { a: newA2, b: newB2 } = arr2[3]
    console.log(newA, newB, newA2, newB2)
  }
}
</script>
<style lang="scss" scoped>
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
